<template>
    <div class="layout">
        <div class="header">
            <div>header</div>
            <div>
                <NuxtLink to="/">
                    <button>Home</button>
                </NuxtLink>
                <NuxtLink to="/account">
                    <button>account</button>
                </NuxtLink>
                <NuxtLink to="/work">
                    <button>work</button>
                </NuxtLink>
                <NuxtLink to="/login">
                    <button>login</button>
                </NuxtLink>
            </div>
        </div>
        <!-- 页面的内容 -->
        <slot></slot>
        <div class="footer">footer</div>
    </div>
</template>

<script lang="ts" setup></script>
<style scoped>
.header {
    text-align: center;
    font-size: 30px;
    background-color: red;
}

.footer {
    border: 1px solid green;
    text-align: center;
    font-size: 30px;
    background-color: #cdcdcd;
}
</style>
